{% extends "index.html" %}
{% block content %}

							<div class="row">
								<div class="col-xs-12">
									
									<div class="col-sm-offset-1 col-sm-10">
										<div class="well well-sm">
													<button type="button" class="close" data-dismiss="alert">&times;</button>
													&nbsp;
													<div class="inline middle blue bigger-110"> <i class="icon-wrench icon-animated-wrench bigger-150"></i>
													&nbsp;{{ user.username }},&nbsp;<strong>用户中心</strong> </div>
	
													&nbsp; &nbsp; &nbsp;
													
												</div><!-- /well -->
										<div class="tabbable tabs-left">
											<ul class="nav nav-tabs" id="myTab3">
												<li class="active">
													<a data-toggle="tab" href="#vm">
														<i class="pink  icon-bullhorn bigger-110"></i>
														我的虚拟机
													</a>
												</li>

												<li >
													<a data-toggle="tab" href="#messages">
														<i class="orange  icon-rss bigger-110"></i>
														消息中心
													</a>
												</li>

												<li>
													<a data-toggle="tab" href="#password">
														<i class="blue icon-key"></i>
														修改密码
													</a>
												</li>
											</ul>

											<div class="tab-content">
												<div id="vm" class="tab-pane in active">
													<div class="table-header">
														当前所拥有的虚拟机实例
													</div>
														<div class="table-responsive">
															<table id="sample-table-2" class="table table-striped table-bordered table-hover">
																<thead>
																	<tr>
																		<th>宿主机</th>
																		<th>实例名称</th>
																		<th>CPU</th>			
																		<th>
																			<i class="icon-time bigger-110"></i>
																			内存(MB)
																		</th>
																		<th>IP地址</th>				
																		<th>状态</th>			
																		<th>操作</th>
																	</tr>
																</thead>
				
																<tbody>
																{% for ds in vmList %}
																	<tr>
				
																		<td>
																			<a href="/viewServer/{{ds.server.id}}/">{{ ds.server.server_ip }}</a>
																			
																		</td>
																		<td>
																			<a href="/viewInstance/{{ds.server_id}}/{{ ds.name }}/">
																			{{ ds.name }}
																			</a>
																		</td>
																		<td>{{ ds.cpu }}</td>
																		<td>{{ ds.mem }}</td>
																		{% if ds.ips %}
																			<td><code>{{ ds.ips }}</code></td>
																		{% else %}
																			<td>{{ ds.ips }}</td>
																		{% endif %}
																		<td>
														                   	{% if ds.status == 1 %}
														                   		 <i class="icon-play green"></i>
														                   	{% elif ds.status == 3 %}
														                   		 <i class="icon-pause orange"></i>
														                   	{% elif ds.status == 5 %}
														                   		 <i class="icon-stop red"></i>						                   		 
														                   	{% endif %}																
																			
																		</td>
				
																		<td>
																			
																			<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
																				
																				
																				<a class="blue" href="/vnc/{{ ds.server_id }}/{{ ds.vnc }}/{{ ds.token }}/" target="_black">
																					<i class="icon-desktop bigger-120"></i>																	
																				</a>
																				
																				<a class="blue" href="javascript:" onclick="onBtnHandleIns(this,{{ ds.server_id }},'{{ ds.name }}','start')">
																				<i class="icon-play bigger-120 green"></i>																
																				</a>
																						
																				<a class="blue" href="javascript:" onclick="onBtnHandleIns(this,{{ ds.server_id }},'{{ ds.name }}','suspend')">
																				<i class="icon-pause bigger-120 orange"></i>																
																				</a>																		
																					
																				<a class="blue" href="javascript:" onclick="onBtnHandleIns(this,{{ ds.server_id }},'{{ ds.name }}','resume')">
																				<i class="icon-play-circle bigger-120 "></i>																	
																				</a>
																				
																				<a class="blue" href="javascript:" onclick="onBtnHandleIns(this,{{ ds.server_id }},'{{ ds.name }}','reboot')">
																					<i class="icon-repeat bigger-120"></i>																	
																				</a>																																	
																					
																				<a class="blue" href="javascript:" onclick="onBtnHandleIns(this,{{ ds.server_id }},'{{ ds.name }}','shutdown')">
																					<i class="icon-stop bigger-120 red"></i>															
																				</a>	
																				
																				<a class="red" href="javascript:" onclick="onBtnHandleIns(this,{{ ds.server_id}},'{{ ds.name }}','halt')">
																					<i class="icon-off bigger-120"></i>
																				</a>
																				 																																																		
																				<a class="red" href="javascript:" onclick="onBtnHandleIns(this,{{ ds.server_id }},'{{ ds.name }}','delete')">
																					<i class="icon-trash  bigger-120"></i>
																				</a>
																				<a class="black" href="/viewInstance/{{ds.server_id}}/{{ ds.name }}/">
																					<i class="icon-zoom-in  bigger-120"></i>
																				</a>
																																																				
																			</div>
																													
													
																		</td>
				
																	</tr>
																{% endfor %}
																</tbody>
															</table>
														</div>
													
												</div>
												
												<div id="messages" class="tab-pane">
													<div class="profile-feed row-fluid">
														{% if logList %}
															
															{% for ds in logList %}
																
																	<div class="span6" id="logMsg-{{ds.id}}">														
																		<div class="profile-activity clearfix">
																			<div>
																				{% if ds.status == 0 %}
																					<i class="pull-left thumbicon icon-ok btn-success no-hover"></i>																				
																				{% else %}
																					<i class="pull-left thumbicon icon-remove btn-pink no-hover"></i>
																				{% endif %}
																				<a class="user" href="/viewInstance/{{ ds.server_id }}/{{ ds.vm_name }}/"> {{ ds.user }} </a>
																				{% if ds.result %}
																					{{ ds.content }}&nbsp;{{ ds.result }}
																				{% else %}
																					{{ ds.content }}
																				{% endif %}
																				<div class="time">
																					<i class="icon-time bigger-110"></i>
																					{{ ds.create_time|date:"Y/m/d H:i:s" }}
																				</div>
																			</div>
			
																			<div class="tools action-buttons">
																				<a href="javascript:" onclick="deleteLogsMsg(this,{{ds.id}})" class="red">
																					<i class="icon-remove bigger-125"></i>
																				</a>
																			</div>
																		</div>														
																	</div><!-- /span -->

															{% endfor %}
															<div id="viewlog">
															</div>
														{% endif %}
														
													</div>
													<div class="space-12"></div>
													<div class="center">
														<a href="javascript:" onclick="viewMoreLogs(this,'{{user}}','viewlog')" class="btn btn-small btn-primary" >
															<i class="icon-rss bigger-150 middle"></i>
															查看更多消息
															<i class="icon-on-right icon-arrow-right"></i>
														</a>
													</div>
												</div>

												<div id="password" class="tab-pane">
													<div class="space-10"></div>
														<form role="form" method="post" id="modfPassword" class="main form-horizontal">{% csrf_token %}
															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-pass1">新密码</label>

																<div class="col-sm-9">
																	<input type="password" name='n_pwd' />
																</div>
															</div>

															<div class="space-4"></div>

															<div class="form-group">
																<label class="col-sm-3 control-label no-padding-right" for="form-field-pass2">确认密码</label>

																<div class="col-sm-9">
																	<input type="password" name='c_pwd' />
																</div>
															</div>
															<div class="hr hr32 hr-dotted"></div>
																<div class="form-group">
																	<div class="col-md-offset-3 col-md-9">
																		<button class="btn btn-info" type="button" onclick="modAccoutPassword(this,'{{user}}','password')">
																			<i class="icon-ok bigger-110"></i>
																			提交
																		</button>
							
																		&nbsp; &nbsp; &nbsp;
																		<button class="btn" type="reset">
																			<i class="icon-undo bigger-110"></i>
																			撤销
																		</button>
																	</div>
																</div>
														</form>
												</div>
											</div>
										</div>
									</div>								
								</div>
							</div>
							
	<script src="/static/js/jquery.dataTables.min.js"></script>
	<script src="/static/js/jquery.dataTables.bootstrap.js"></script>						
	<script type="text/javascript">
			jQuery(function($) {
				var oTable1 = $('#sample-table-2').dataTable( {
				"aoColumns": [
			      { "bSortable": false },
			      null, null,null, null, null,
				  { "bSortable": false }
				] } );
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			})
			
			function onBtnHandleIns(obj, server_id,vm_name,op){
				var btnObj = $(obj);
				if ( op == 'start'){
					var txt=  "是否确认启动？"
				}
				else if ( op == 'shutdown'){
					var txt=  "是否确认关闭？"
				}
				else if( op == 'resume' ){
					var txt=  "是否确认恢复？"
				}
				else if( op == 'suspend' ){
					var txt=  "是否确认暂停？"
				}			
				else if( op == 'halt' ){
					var txt=  "是否确认强制关闭？"
				}	
				else if( op == 'delete' ){
					var txt=  "是否确认删除？"
				}
				else if( op == 'reboot' ){
					var txt=  "是否确认重启？"
				};				
				var option = {
						title: "操作主机("+vm_name+")",
						btn: parseInt("0011",2),
						onOk: function(){
							$.ajax({
								  type: 'POST',
								  url: '/handleInstance/'+server_id+'/',
								  data:{
										"op":op,
										"vm_name":vm_name
									},
							      success:function(response){			            
						                if (response["code"]=="200"){ 
						                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
	
						                }
							        	else{
							        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
							        	}						                
								},
					            error:function(response){
					            	window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.error);
					            },		
								});
						},
						onCancel:function(){	
						},
						onClose:function(){
						}
					}			
				window.wxc.xcConfirm(txt, "custom", option);
		}
			
			function modAccoutPassword(obj,user,op) {
				var btnObj = $(obj);
				btnObj.attr('disabled',true);
				var required = ['c_pwd','n_pwd'];
				var server_data = {};
				var form = document.getElementById('modfPassword');
				for (var i = 0; i < form.length; ++i) {
					var name = form[i].name;
					var value = form[i].value;	
					idx = $.inArray(name, required);	
					if (idx >= 0 && value.length == 0){
						window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
						btnObj.removeAttr('disabled');
						return false;
					}
					else if(  value.length != 0 && name.length != 0 ){
						server_data[name] = value;
					};				
				};			
				server_data['op'] = op;
				server_data['username'] = user;
				$.ajax({
					dataType: "JSON",
					url:'/profile/', //请求地址
					type:"POST",  //提交类似
					data:server_data,  //提交参数
					success:function(response){
						btnObj.removeAttr('disabled');
						if (response["code"] == 200){
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
						}
						else {
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
						}
						
					},
			    	error:function(response){
			    		btnObj.removeAttr('disabled');
			    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
			    	}
				})	
			}
			var logCount = 10;
			function viewMoreLogs(obj,user,op) {
				var btnObj = $(obj);
				btnObj.attr('disabled',true);
				var server_data = {};	
				var logs = document.getElementById('viewlog').innerHTML;
				logCount = logCount + 10
				server_data['op'] = op;
				server_data['username'] = user;
				server_data['count'] = logCount;
				$.ajax({
					dataType: "JSON",
					url:'/profile/', //请求地址
					type:"POST",  //提交类似
					data:server_data,  //提交参数
					success:function(response){
						btnObj.removeAttr('disabled');
						if (response["code"] == 200){
							var newsLogs = '';
							for (var i=0;i<response['data'].length;i++)
								{
									if (response['data'][i]["status"] == 0){
										status = '<i class="pull-left thumbicon icon-ok btn-success no-hover"></i>' 
										content = response['data'][i]["content"]
									}
									else{
										status = '<i class="pull-left thumbicon icon-remove btn-success no-hover"></i>' 
										content = response['data'][i]["content"] + ' ' +response['data'][i]["result"]
									};
									newsLogs += '<div class="span6" id="logMsg-'+ response['data'][i]['id'] + '">' +														
													'<div class="profile-activity clearfix">' +
														'<div>' + status +
															'<a class="user" href="/viewInstance/'+  response['data'][i]["id"] + '/'+ response['data'][i]["vm_name"] +'/">' + 
															   response['data'][i]["user"] + '</a>' + content + 
															'<div class="time">' +
																'<i class="icon-time bigger-110"></i>' +response['data'][i]["create_time"].replace("T",' ').replace(/-/g,'/').slice(0,19) +
															'</div>' +
														'</div>' +				
														'<div class="tools action-buttons">' +
															'<a href="javascript:" onclick="deleteLogsMsg(this,'+ response['data'][i]["id"] +')" class="red">' +
																'<i class="icon-remove bigger-125"></i>' +
															'</a>' +
														'</div>' +
													'</div>	' +													
												'</div>'									
												
							}
							document.getElementById('viewlog').innerHTML = newsLogs;
						}
						else {
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
						}
						
					},
			    	error:function(response){
			    		btnObj.removeAttr('disabled');
			    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
			    	}
				})	
			}
			
			
			function deleteLogsMsg(obj,id) {
				$.ajax({
					dataType: "JSON",
					url:'/api/logs/'+ id +'/', //请求地址
					type:"DELETE",  //提交类似
					success:function(response){
						var str= 'logMsg-' + id
						document.getElementById(str).innerHTML = ''; 
						getLogsMsg ();
					}					
				})					
			}			
			
	</script>

{% endblock %}